<!--
 * @Author: jiangyg email@jiangyg.com
 * @Date: 2022-11-10 20:47:06
 * @LastEditors: jiangyg email@jiangyg.com
 * @LastEditTime: 2022-11-14 05:40:33
 * @FilePath: /frontend/mall-frontend/src/views/modules/admin/main.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="site-wrapper" v-loading.fullscreen.lock="loading" element-loading-text="拼命加载中">
    <template v-if="!loading">
      <el-container :style="{ height: documentClientHeight + 'px' }">
        <!-- 左侧导航栏 -->
        <main-aside />
        <!-- 右侧内容区域 -->
        <el-container direction="vertical" :style="{ 'background-color': '#f3f3f3' }">
          <!-- 顶部导航栏 -->
          <main-header />
          <!-- 内容区域 -->
          <main-content />
        </el-container>
      </el-container>
    </template>
  </div>
</template>
<script lang="ts" setup>
import { useStore } from "vuex";
import { ref, computed, onMounted } from "vue";

import MainAside from "@/views/modules/admin/main-aside.vue";
import MainHeader from "@/views/modules/admin/main-header.vue";
import MainContent from "@/views/modules/admin/main-content.vue";

const store = useStore();

// 页面是否加载中标志
const loading = ref(true);

// 窗口高度
const documentClientHeight = computed(() => store.getters["documentClientHeight"]);

// 组件挂载完成后执行
onMounted(() => {
  // 实时计算窗口大小
  let resetDocumentClientHeight = () => {
    let clientHeight = document.documentElement["clientHeight"];
    store.commit("documentClientHeight", clientHeight);
  };
  resetDocumentClientHeight();
  window.onresize = () => {
    resetDocumentClientHeight();
  };

  // 加载状态更新
  loading.value = false;
});
</script>

<style lang="scss">
body {
  overflow: hidden;
}
</style>